<script setup>
  import {ref, reactive} from 'vue'

  let user = reactive({
    account: '',
    password: '',
    age: 0,
    sex: '',
    hobby: [],
    school: '',
    remark: '',
    agree: false
  })

  let hobbys = ref(['台球', '音乐', '滑雪', '唱歌'])

  let schools = ref(['', '北京校区', '南京校区', '上海校区', '广州校区', '成都校区'])

  function doSubmit() {
    console.log('submit', JSON.stringify(user))
  }

</script>

<template>
  <h3>表单输入通过v-model绑定数据并提交 (演示中未做输入值的检验,打开日志可查看最终提交的JSON数据)</h3>

  <form class="container" @submit.prevent="doSubmit">
    <label class="space" for="account">账号: </label>
    <input class="space" id="account" v-model.trim="user.account" placeholder="请输入账号">
    <br>
    <label class="space" for="password">密码: </label>
    <input class="space" type="password" id="password" v-model="user.password" placeholder="请输入密码">
    <br>

    <label class="space">年龄: </label>
    <input class="space" type="number" v-model="user.age">
    <br>

    <label class="space">性别: </label>
    <input class="space" type="radio" name="sex" value="male" v-model="user.sex">男
    <input class="space" type="radio" name="sex" value="female" v-model="user.sex">女
    <br>

    <label class="space">爱好: </label>
    <label v-for="(item, index) in hobbys" :for="'hobby'+index">
      <input class="space" type="checkbox" name="hobby" :id="'hobby'+index" :value="item" v-model="user.hobby">{{item}}
    </label> 
    <br>

    <label class="space">所属校区: </label>
    <select class="space" v-model="user.school">
      <option v-for="item in schools" :disabled="!item" :value="item">{{item ? item : '请选择校区'}}</option>
    </select>
    <br>

    <label class="space">备注信息: </label>
    <br>
    <textarea v-model.lazy="user.remark"></textarea>
    <br>

    <input class="space" type="checkbox" id="agree" v-model="user.agree">
    <label style="margin-top: 10px;" for="agree">阅读并接受<a href="/">《用户协议》</a></label>
    <br>

    <button class="space submit" :disabled="!user.agree">提交</button>
  </form>

  <hr>
  <p>
    说明:<br>
    1. Vue3 的 v-model 已经可以很好地处理 type 是 number 类型的输入框了,不需要再像vue2那样加 .number 修饰符来确保值保存为数值了. 可参考官方文档中的说明: 
    <a href="https://v3.cn.vuejs.org/guide/forms.html#number"><b>.number</b></a> <br>
    2. 复选框 checkbox 应该用数组来保存选中的多个可能的值; 而选择框选项 select 一般会在开头加上一个不能选中的项提示项,这个提示项可以通过 disabled 来设置成不可选中. <br>
    3. v-model 修饰符的使用可以查看官方文档: <a href="https://v3.cn.vuejs.org/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6"><b>修饰符</b></a><br>

    &nbsp;&nbsp;&nbsp;&nbsp;官方文档: <a href="https://v3.cn.vuejs.org/guide/forms.html"><b>表单输入绑定</b></a>
  </p>
</template>

<style scoped>

.container{
  font-size: 18px;
}

.space {
  margin-top: 10px;
  margin-left: 10px;
}

textarea {
  margin-left: 10px;
  width: 300px;
  height: 100px;
}

.submit {
  width: 100px;
  height: 30px;
}

</style>